<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            line-height: 300px;
            text-align: center;
            font-size: 100px;

            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
        }
    </style>
</head>

<body>
    <div>开始</div>
    <script>
        // ""
        var str = "杨璐瑶,顾乐,刘奇,李存财,靳开创,王紫薇,李江涛,董彦博,张赫,邢首都,张少鹏,柳怀,李孟焱,王彬,李陈,李建涛,汤阳阳,位恩喜,付建朋,张少龙,曲永沛,谢遵杰,廖治行,张艺,李国政,余庭伟,曾娜娜,梁秋冉,付潇然,刘文奇,刘奕赛,李楠,牛意博,张自宽,李根源,唐俊豪,张晓羽,尹裕钧,李梦晗,杨嘉楠,张旭,高鹏飞,翟海迪,苏丽敏,张尚坤,张亚阳";
        var arr = str.split(",");
        // console.log(arr.length); //46

        // 点击开始 让页面每间隔0.01s随机刷新一个名字 再次点击 暂停
        var div = document.querySelector("div");
        // 记录点击事件执行的次数
        var cont = 0;
        var time;
        div.onclick = function () {
            cont++;
            if (cont % 2 == 0) {
                // 执行暂停
                clearInterval(time);
                // div.innerHTML = arr[2];


                // 结束代码的执行 即,如果执行了暂停代码 就不往下执行了
                return;
            }
            // 执行开始
            time = setInterval(function () {
                // 根据arr长度得到一个随机的索引值
                var i = Math.floor(Math.random() * arr.length); //0-45


                // div.style.color = rgb();
                div.style.backgroundImage = `linear-gradient(${rgb()},${rgb()})`;
                // arr[i] 得到一个随机的名字
                // 将这个随机的名字设置给div作为内容
                div.innerHTML = arr[i];
            }, 10)


        }

        function rgb() {
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return `rgb(${r},${g},${b})`;
        }
    </script>
</body>

</html>